
define(["utils","base"],function(utils,baseClass){
  var RepeatItem = function(config){
    var _this = this;
    this.datasource = config.$$datasource;

    this.parent = config.$$parent;
    if(config.style){
      if(!config.style["flexDirection"]&&!config.style["flex-direction"]){
        config.style.flexDirection="column";
        config.style.webkitFlexDirection="column";
      }
    }
    if(this.parent.useFloatToWrap){
      config.style["float"] = "left";
      config.style["display"] = "inline-block";
    }
    RepeatItem.baseConstructor.call(this,config);
    var className = this.parent.useFloatToWrap?"yy-repeatitem":"displayflex yy-repeatitem";
    this.$el.addClass(className);
    this.$el.bind("click",function(){
      _this.parent._itemClick(_this);
    });
    this.initLayout(config.$$datasource,null,this);
  }

  utils.extends(RepeatItem,baseClass);

  RepeatItem.prototype.remove = function(){
    var index = this.parent.datasource.indexOf(this.datasource);
    var com_index = this.parent.components.indexOf(this);
    if(index>=0){
      this.parent.datasource.splice(index,1);
    }
    if(com_index>=0){
      this.parent.components.splice(com_index,1);
    }
    if(this.splitLine){
      this.splitLine.remove();
    }
    this.$el.remove();
  };

  RepeatItem.prototype.rebind = function(data){
    this.$el.empty();
    this.datasource = data;
    this.initLayout(data,null,this);
  };

    var Component = function(config){
        var _this = this;
        var style= config.style||{};
        this.useFloatToWrap = !utils.isSupportFlexWrap()&&(style["flexWrap"]=="wrap"||style["flex-wrap"]=="wrap");
        this.selectedItems = [];
        this.splitStyle = config.splitStyle;
        if(config.subComponent){
          config.$$pageview.config.components[config.subComponent].ref = true;
        }
        Component.baseConstructor.call(this,config);
        this.datasource =[];
        var className = this.useFloatToWrap?"yy-repeat ":"displayflex yy-repeat ";
        this.$el.addClass(className);
        this.selectedMode = config.selectedMode;
        this.subComponent = null;
        this.init();
    }
    utils.extends(Component,baseClass);

    Component.prototype.init=function(){
      var _this = this;
      var items = this.config.items||[];
      for(var i= 0,j=items.length;i<j;i++){
          this.addItem(items[i]);
      }

      if(this.config.subComponent){
        this.getComponentInstanceByComKey(this.config.subComponent,this.datasource,null,function(comInstance){
          _this.$el.append(comInstance.$el);
          _this.subComponent= comInstance;
        },
        function(){});
      }

      if(this.config.nodata){
        this.getComponentInstanceByComKey(this.config.nodata,null,null,function(comInstance){
          _this.$el.append(comInstance.$el);
          if(_this.components.length > 0 ){
            comInstance.$el.addClass("displaynone");
          }
          _this.noDataDom= comInstance;
        },
        function(){});
      }
    };






    Component.prototype.showOrHideSubComponent = function(isShow){
      if(this.config.subComponent){
        this.pageview.do(this.config.subComponent,function(target){
          if(isShow){
            target.$el.removeClass("displaynone");
          }else{
            target.$el.addClass("displaynone");
          }
        });
      }
    };

    Component.prototype.empty = function(){
      for(var i=this.components.length-1;i>=0;i--){
        this.components[i].remove();
      }
      this.datasource =[];
      this.components = [];
    };

    Component.prototype.bindData =function(data){
      var _this = this;
      this.empty();


      if(data && (data instanceof Array) && data.length>0){
        if(this.noDataDom){
          this.noDataDom.$el.addClass("displaynone");
          this.showOrHideSubComponent(true);
        }else{
          this.showOrHideSubComponent(true);
        }
        for(var i=0,j=data.length;i<j;i++){
          this.addItem(data[i]);
        }
      }else{
        if(this.noDataDom){
          this.noDataDom.$el.removeClass("displaynone");
        }
        if(this.config.subComponentAlwaysShow){
            this.showOrHideSubComponent(true);
          }else{
          this.showOrHideSubComponent(false);
        }
      }
    };


    Component.prototype.getItem = function(callback){
      for(var i=0,j=this.components.length;i<j;i++){
        var item = this.components[i];
        if(callback(item)){
          return item;
          break;
        }
      }
      return null;
    },

    Component.prototype.insertItem = function(itemData,index){

      this.noDataDom&&this.noDataDom.$el.addClass("displaynone");
      this.addItem(itemData,index);
    };

    Component.prototype.addItem=function(itemdata,index){
      var isInsert =false;
      if(index ===undefined||index===null||index< 0||index>=this.datasource.length){
        this.datasource.push(itemdata);
      }else{
        this.datasource.splice(index,0,itemdata);
        isInsert = true;
      }

      var item_instance = new RepeatItem({
        type:"repeatitem",
        root:this.config.root,
        style:this.config.itemStyle,
        $$pageview:this.pageview,
        $$datasource:itemdata,
        $$parent:this,
        selectedClassName:this.config.itemSelectedClassName
      });

      var splitLine;
      if(this.splitStyle){
        if(this.components.length>0){
          splitLine = $("<div></div>");
          item_instance.splitLine = splitLine;
          utils.css(splitLine,this.splitStyle);
        }
      }

      if(isInsert){
        this.components.splice(index,0,item_instance);
      }else{
        this.components.push(item_instance);
      }


      if(isInsert){
        var nextCom = this.components[index+1];
        if(index!==0){
          splitLine&& splitLine.insertBefore(nextCom.$el);
        }
        item_instance.$el.insertBefore(nextCom.$el);
        if(index===0){
          splitLine&& splitLine.insertBefore(nextCom.$el);
        }
      }else{
        if(!this.subComponent){
          splitLine&& this.$el.append(splitLine);
          this.$el.append(item_instance.$el);
        }else{
          splitLine&&splitLine.insertBefore(this.subComponent.$el);
          item_instance.$el.insertBefore(this.subComponent.$el);
        }
      }



    }


    Component.prototype._itemClick=function(itemInstance){
      var selectedMode = this.selectedMode;
      if(selectedMode){
        itemInstance.selected();
      }
      var pluginName = this.config.comKey+"_itemclick";
      if(this.pageview.plugin){
        var method = this.pageview.plugin[pluginName];
        if(itemInstance.disabled){
          return;
        }
        method && method.call(this.pageview.plugin,itemInstance,{index:itemInstance.$el.index()});
      }
      this.config.$$itemClick && this.config.$$itemClick(itemInstance);
    }

    return Component;
});
